<template>
  <div class="product-detail-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo" @click="$router.push('/')" style="cursor: pointer;">
            <span>视分享商城</span>
          </div>
          <div class="search-box">
            <input type="text" placeholder="搜索商品..." class="search-input">
            <button class="search-btn"><i class="fas fa-search"></i></button>
          </div>
          <div class="header-actions">
            <button class="btn btn-secondary login-btn">
              <i class="fas fa-user"></i>
              登录
            </button>
            <button class="btn btn-secondary order-btn">
              <i class="fas fa-clipboard-list"></i>
              订单
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="main">
      <div class="container">
        <div class="product-detail-content" v-if="product">
          <!-- 面包屑导航 -->
          <div class="breadcrumb">
            <span @click="$router.push('/')" style="cursor: pointer; color: #667eea;">首页</span>
            <i class="fas fa-chevron-right"></i>
            <span>{{ product.brand }}</span>
            <i class="fas fa-chevron-right"></i>
            <span>{{ product.title }}</span>
          </div>

          <!-- 商品详情 -->
          <div class="product-detail">
            <div class="product-images">
              <div class="main-image">
                <img :src="product.image" :alt="product.title">
                <div class="product-discount" v-if="product.discount">-{{ product.discount }}%</div>
              </div>
            </div>

            <div class="product-info">
              <div class="product-brand">{{ product.brand }}</div>
              <h1 class="product-title">{{ product.title }}</h1>
              
              <div class="product-price">
                <span class="current-price">¥{{ product.currentPrice }}</span>
                <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
              </div>

              <div class="product-features">
                <span class="feature-tag" v-for="feature in product.features" :key="feature">{{ feature }}</span>
              </div>

              <div class="product-stats">
                <div class="stat-item">
                  <span class="stat-label">销量</span>
                  <span class="stat-value">{{ product.salesCount }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">评分</span>
                  <span class="stat-value">
                    <i class="fas fa-star" v-for="n in 5" :key="n"></i>
                    {{ product.rating }}
                  </span>
                </div>
              </div>

              <div class="product-actions">
                <button class="btn btn-primary buy-btn">
                  <i class="fas fa-shopping-cart"></i>
                  立即购买
                </button>
                <button class="btn btn-secondary add-cart-btn">
                  <i class="fas fa-plus"></i>
                  加入购物车
                </button>
                <button class="btn btn-secondary favorite-btn">
                  <i class="far fa-heart"></i>
                  收藏
                </button>
              </div>

              <div class="product-description">
                <h3>商品描述</h3>
                <p>{{ product.description || '暂无商品描述' }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载状态 -->
        <div class="loading" v-else>
          <i class="fas fa-spinner fa-spin"></i>
          <p>加载中...</p>
        </div>
      </div>
    </main>

    <!-- 底部信息 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-bottom">
          <p>&copy; blogshare.com 版权所有 | 浙公网安备33011002014818号 | <a href="#" class="footer-link">软件许可协议</a> | <a href="#" class="footer-link">用户服务协议</a></p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const product = ref<any>(null)

// 模拟商品数据
const productData = {
  1: {
    id: 1,
    brand: 'Apple',
    title: 'iPhone 15 Pro 256GB 钛金色',
    currentPrice: '8,999',
    originalPrice: '10,199',
    discount: 12,
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400&h=400&fit=crop&crop=center',
    features: ['正品保障', '全国联保', '顺丰包邮'],
    salesCount: '3.2k+',
    rating: '4.9',
    description: 'iPhone 15 Pro 采用钛金属设计，搭载 A17 Pro 芯片，配备 48MP 主摄，支持 USB-C 接口，带来更强大的性能和更出色的拍摄体验。'
  },
  2: {
    id: 2,
    brand: 'Apple',
    title: 'MacBook Air M3 芯片 512GB 午夜色',
    currentPrice: '9,999',
    image: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=400&fit=crop&crop=center',
    features: ['M3芯片', '18小时续航', '免息分期'],
    salesCount: '2.8k+',
    rating: '4.8',
    description: 'MacBook Air 搭载 M3 芯片，提供长达 18 小时的电池续航，配备 Liquid 视网膜显示屏，轻薄便携，性能强劲。'
  }
}

onMounted(() => {
  const productId = route.params.id
  // 模拟API调用
  setTimeout(() => {
    product.value = productData[productId as string as keyof typeof productData] || null
  }, 500)
})
</script>

<style scoped>
.product-detail-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.product-detail-content {
  padding: 40px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #636e72;
}

.breadcrumb i {
  font-size: 12px;
  color: #bdc3c7;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.product-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.product-discount {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-brand {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-title {
  font-size: 28px;
  font-weight: 600;
  color: #2d3436;
  line-height: 1.3;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 12px;
}

.current-price {
  font-size: 32px;
  font-weight: 700;
  color: #e74c3c;
}

.original-price {
  font-size: 18px;
  color: #bdc3c7;
  text-decoration: line-through;
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tag {
  background: #f8f9fa;
  color: #636e72;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.product-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-label {
  font-size: 12px;
  color: #95a5a6;
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #2d3436;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-value i {
  color: #f39c12;
  font-size: 12px;
}

.product-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.buy-btn {
  flex: 1;
  min-width: 150px;
}

.add-cart-btn, .favorite-btn {
  min-width: 120px;
}

.product-description {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.product-description h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 10px;
}

.product-description p {
  font-size: 14px;
  line-height: 1.6;
  color: #636e72;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  color: #636e72;
}

.loading i {
  font-size: 48px;
  margin-bottom: 20px;
  color: #667eea;
}

@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 20px;
  }
  
  .product-title {
    font-size: 24px;
  }
  
  .current-price {
    font-size: 28px;
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  .buy-btn, .add-cart-btn, .favorite-btn {
    width: 100%;
  }
}
</style> 